HTML - Tag Hyperlink

Tag Hyperlink ou <a>

Esta tag é uma das mais importantes da linguagem HTML. Com um simples clique do mouse você vai de um ponto para outro não importando se ele está na página corrente ou numa página no site lá na China. Chamamos isso de navegar entre as páginas e isto é feito com extrema facilidade, simplicidade e velocidade graças a esta tag. Pode parecer algo simples mas o fato de não ter que procurar onde eu devo ir, por um certo conteúdo, é um ganho significativo de tempo e agiliza muito a pesquisa.

Com isto podemos incorporar documentos/sites explicativos ao assunto abordado encaminhando o usuário diretamente ao seu destino com um só clique do mouse enriquecendo sua interação com o conteúdo do site e com isto evitando que ele precise procurar por mais detalhes, tudo está ao alcance do clique do mouse.

Tipos de links - Internos ao documento

O destino do link pode ser um ponto dentro do documento corrente ( link interno a página ). Com isto ao clicar no link o conteúdo da página será apenas deslocado para exibir o conteúdo de destino.

O destino dos links podem ser locais e para isto utilizamos o parâmetro name da tag para indicar o destino de um link local(href="destino").

Tipos de links - Externos ao documento mas no mesmo servidor web atual

O link também pode apontar para um outro do documento ou, melhor ainda, para ponto específico em outro documento ( link externo a página mas no mesmo servidor ) externo a página corrente. Com isto o browser irá abrir a página de destino e podemos escolher como este 'novo conteúdo' será exibido. Se o parâmetro target possuir o valor self (target="self") o conteúdo de destino será exibido na página corrente, apenas seu conteúdo será alterado. Se o parâmetro for blank (target="blank") o conteúdo da página atual será preservado e uma nova página do browser será exibida sobre ela ( sobrepondo ela ). Portanto teremos agora duas páginas do browser aberta.

Se o link for em outra página mas no mesmo site utilizamos o parâmetro id para indicar o destino (href="#destino").

Tipos de links - Externos ao documento e em um servidor web remoto ( não é o servidor corrente)

Se o link for em outra página em outro site utilizamos a url de destino completa da página de destino (href="www.google.com").

Evitando confusões com conceitos

Existe uma tag com o nome link mas ela não é um link para navegação outra página mas sim um apontador de onde um certo recurso deverá ser localizado e anexado a página corrente. A tag link só é usada no header para incorporar ao código da página recursos de outras páginas como folhas de estilo, bootstrap, javascript.
A tag anchor ( que muitos chamam de link mas para não confundir é melhor chamar de hyperlink) faz a ligação do documento com outro ponto de interesse de maneira que com um clique eu navegue do documento atual e vá direto até ele.

Importante : Os recursos de navegação (URL) estão intrinsincamente ligados aos recursos de infra-estrutura de rede. Para mais detalhes leia Funcionamento Internet.

Tag a - Parâmetro target

O parâmetro target da tag define como a página de destino deverá ser aberta em relação a página atual.

Se o parâmetro target for '_self', que é o default do html, a página destino substituindo a página atual que é o default e é chamado de _self. Para mais informações sobre como abrir a página de destino Clique aqui

Se o parâmetro target for '_blank' a página atual será mantida e uma nova página de destino é exibida em uma nova página.

Se o parâmetro target for '_top' a página atual será mantida e uma nova página de destino é exibida em uma nova página no topo da página atual.

Se o parâmetro target for '_parent' a página atual será mantida e uma nova página de destino será exibida na página pai / antecessora da página atual.

Tag anchor - Parâmetro Download

Dentro do html5 foi incluído um parâmetro muito importante na tag achor que é o parâmetro download. Utilizando este parmetro da seguinte maneira : download="arquivo" ao clicar no link ao invés de abrir uma nova página será feito o download do arquivo.

Tag <a> - Exemplos - Link interno a mesma página

Muitas vezes estamos lendo um documento e ele faz referência a um anexo no final do documento.
Se este anexo é sem importância para o usuário ele passará batido pelo link. Mas se o anexo é de vital importância para o usuário ele vai querer parar de ler o que esta lendo e ir para o anexo. É para isso que existe o link, um clique e você tá lá.
Exemplo de link para a própria página :    O href do link aponta para o name de uma tag qualquer dentro da página.

      Link : <a href="#linkInterno"> Teste de Link Interno</a>
      Destino link: <a name="linkInterno">Este é o destino do linkInterno</a>

Testando o funcionamento do Link interno ( eu coloquei ele bem longe ): Teste de Link interno


Tag <a> - Exemplos - Link externo a página mas dentro do servidor

Este é o modelo mais clássico de uso desta tag. Estamos numa página e queremos navegar para outra página dentro do nosso site.

Exemplo de link para uma página externa mas no mesmo servidor :
<a href="00-Sites de Referencia.html"> Teste de Link externo no mesmo servidor-Navegação para a página 00-Sites de Referencia.html</a>

Testando o funcionamento do Link externo mas no mesmo servidor:
Teste de Link externo no mesmo servidor-Navegação para a página 00-Sites de Referencia.html

Outra possibilidade do link externo é apontar diretamente para um ponto na página de destino.
Para isto basta agregar a url de destino o caractere # e o identificador do ponto.
No documento de destino basta colocar no ponto de destino, dentro da tag id='#destino'

Exemplo de link para uma página externa mas no mesmo servidor para um ponto específico da página :
     <a href="20-ElementosHTML10-Classe 11 - Formulario.html#meter">20-ElementosHTML10-Classe 11 - Formulario.html - Item meter</a>

No documento de destino:      <h3 name="meter" id="meter"><meter></h3>

Testando o funcionamento do Link externo mas no mesmo servidor para um ponto específico da página:
20-ElementosHTML10-Classe 11 - Formulario.html - Item meter

Tag <a> - Exemplos - Link externo a página e fora do nosso servidor

Este link é exatamente igual ao link para documento externo no mesmo site com a diferença que será chamado um servidor externo que fará o uso do servidor DNS do micro que esta rodando o browser. Estamos numa página e queremos navegar para outra página fora do nosso site.

Exemplo de link para uma página externa fora do nosso servidor :
<a href="https://www.google.com"> Teste de Link externo fora de nosso-Navegação para a google.com</a>

Testando o funcionamento do Link externo ao nosso servidor:
Teste de Link externo fora de nosso-Navegação para a google.com